<template>
  <div class="login-box">
    <div class="login-logo">
      <a href="/">
        <b>NB</b>center</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">注册新用户</p>
  
      <form role="form" v-on:submit.prevent="register">
        <div class="form-group has-feedback">
          <input type="email" autofocus="autofocus" class="form-control" placeholder="邮箱" required="required" v-model="email">
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" placeholder="密码" required="required" v-model="password">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" placeholder="请重复输入一次密码" required="required" v-model="password_again">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <div class="col-xs-8"></div>
          <div class="col-xs-4">
            <input value="注册" type="submit" class="btn btn-primary btn-block btn-flat">
          </div>
        </div>
      </form>
  
      <p>
        <router-link to="/login">已有用户，直接登录.</router-link>
      </p>
  
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      email: "",
      password: "",
      password_again: "",
    };
  },
  methods: {
    login_succ() {
      let redirect = "/general";
      this.$router.push({ path: redirect });
    },
    register() {
      if (!!!this.email || !!!this.password || !!!this.password_again) {
        return;
      }
      if(this.password !== this.password_again) {
        return;
      }
      let req = this.$store.dispatch('register', {
        email: this.email,
        password: this.password
      });
      req.then(res => {
        this.login_succ();
      });
    }
  }
}
</script>
